import React from 'react'
import { Button, Space } from 'antd'
import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { setLang } from './app/store'
import { asyncThunk } from './app/slice'
import { useAppSelector, useAppDispatch } from './app/hooks'
export default function Header() {
  const { i18n } = useTranslation()
  const dispatch = useAppDispatch()
  const lang = useAppSelector((state) => {
    return state.zs.lang
  })
  return (
    <Space>
      <Button
        onClick={() => {
          const value = lang === 'zh' ? 'en' : 'zh'
          // i18n.changeLanguage(value)
          // setLang返回的是一个action对象,同步的修改redux数据
          // dispatch(setLang(value))
          dispatch(asyncThunk(value))
        }}
      >
        {lang === 'zh' ? 'english' : '中文'}
      </Button>
      {/* <Button
        onClick={() => {
          i18n.changeLanguage('en')
          dispatch(setLang('en'))
        }}
      >
        英文
      </Button> */}
    </Space>
  )
}
